//====================================================
//
//      input
//
//====================================================

/*
HTML5 规定 input 元素的类型有：
button
checkbox
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
submit
text
time
url
week
*/


//设置输入框尺寸
.input-size(@height; @lineheight; @fontsize; @fontweight; @radius) {
    height: @height;
    line-height: @lineheight;
    font-size: @fontsize;   //unit(@fontsize, em);
    font-weight: @fontweight;
    .prefix-border-radius(@radius);
}

//设置输入框风格
.input-style(@color; @bordercolor; @bgcolor; @bordercolorfocus; @shadowfocus) {
    color: @color;
    border-color: @bordercolor;
    background-color: @bgcolor;
    &:focus,
    &.active {
        border-color: @bordercolorfocus;
        .prefix-box-shadow(@shadowfocus);
    }
}

//默认输入框
.@{prefix}input,
.@{prefix}textarea {
    width: @width-input;
    border-width: @borderwidth-input;
    padding-top: @paddingtop-input - @borderwidth-input;
    padding-bottom: @paddingright-input - @borderwidth-input;
    padding-right: @paddingbottom-input - @borderwidth-input;
    padding-left: @paddingleft-input - @borderwidth-input;
    border: transparent;
    border-style: solid;
    vertical-align: middle;
    .input-style(@color-input; @bordercolor-input; @bgcolor-input; @bordercolor-input-focus; @shadow-input-focus);
    .prefix-transition(border-color linear .15s);
    .prefix-box-shadow(@shadow-input);
    &:focus,
    &.active {
        outline: none;
    }
    &.readonly,
    &[readonly],
    &.disabled,
    &[disabled] {
        &,
        &:focus,
        &.active {
            border-style: dotted;
            border-color: @color-gray-light;
            // background: @color-white-dark;
            .prefix-box-shadow(none);
            .prefix-selecttext(none);
        }
    }
    &.disabled,
    &[disabled] {
        color: @color-gray-darker;
        cursor: @cursor-no;
    }
}
.@{prefix}input {
    border-width: 0px 0px @borderwidth-input 0px;
    .input-size(@height-input; @lineheight-input; @fontsize-input; @fontweight-def; @radius-input);
    .comm-textoverflow();
    &:focus,
    &.active {
        border-width: 0px 0px @borderwidth-focus-input 0px;
        padding-bottom: @paddingbottom-input - @borderwidth-focus-input;
    }
    &.readonly,
    &[readonly],
    &.disabled,
    &[disabled] {
        &,
        &:focus,
        &.active {
            border-width: 0px 0px @borderwidth-input 0px;
            padding-bottom: @paddingbottom-input - @borderwidth-input;
        }
    }
}
.@{prefix}textarea {
    border-width: @borderwidth-input;
    resize: none;
    .input-size(@height-textarea; @lineheight-input; @fontsize-input; @fontweight-def; @radius-textarea);
    &:focus,
    &.active {
        border-width: @borderwidth-focus-input;
        padding-top: @paddingtop-input - @borderwidth-focus-input;
        padding-bottom: @paddingright-input - @borderwidth-focus-input;
        padding-right: @paddingbottom-input - @borderwidth-focus-input;
        padding-left: @paddingleft-input - @borderwidth-focus-input;
    }
    &.readonly,
    &[readonly],
    &.disabled,
    &[disabled] {
        &,
        &:focus,
        &.active {
            border-width: 1px 1px 1px 1px;
            padding-top: @paddingtop-input - @borderwidth-input;
            padding-bottom: @paddingright-input - @borderwidth-input;
            padding-right: @paddingbottom-input - @borderwidth-input;
            padding-left: @paddingleft-input - @borderwidth-input;
        }
    }
}
.@{prefix}input-full,
.@{prefix}textarea-full {
    width: 100%;
}
.@{prefix}input-small {
    .input-size(@height-input-small; @lineheight-input; @fontsize-input-small; @fontweight-def; @radius-input);
}
.@{prefix}input-large {
    .input-size(@height-input-large; @lineheight-input; @fontsize-input-large; @fontweight-def; @radius-input);
}
.@{prefix}input-theme,
.@{prefix}textarea-theme {
    .input-style(@color-input; @bordercolor-input-theme; @bgcolor-input-theme; @bordercolor-input-theme-focus; @shadow-input-theme-focus);
}
.@{prefix}input-key,
.@{prefix}textarea-key {
    .input-style(@color-input; @bordercolor-input-key; @bgcolor-input-key; @bordercolor-input-key-focus; @shadow-input-key-focus);
}
.@{prefix}input-light,
.@{prefix}textarea-light {
    .input-style(@color-input; @bordercolor-input-light; @bgcolor-input-light; @bordercolor-input-light-focus; @shadow-input-light-focus);
}
.@{prefix}input-nice,
.@{prefix}textarea-nice {
    .input-style(@color-input; @bordercolor-input-nice; @bgcolor-input-nice; @bordercolor-input-nice-focus; @shadow-input-nice-focus);
}
